<template>
  <div class="page">
    <HeaderPopover name="账号管理" rout="content"/>
    <section class="account">
      <p>管理我的账户</p>
      <van-card :title="content.username" :desc="`手机号：${content.phone}`" :thumb="content.img" />
      <span class="iconi">当前登录</span>
    </section>

    <section class="actionsArea">
      <div class="account_manage">
        <van-cell
          title="收货地址管理"
          is-link
          value="管理我的地址"
          @click="$router.replace({ name: 'address' })"
        />
      </div>
      <div class="account_manage">
        <van-cell title="账户与安全" is-link value="密码实名认证管理" />
        <van-cell title="京东支付密码" is-link value="已设置" />
        <van-cell title="隐私设置" is-link />
      </div>
      <div class="account_manage">
        <van-cell title="联系客服" is-link value="及时解答用户疑难" />
        <van-cell title="切换站点" is-link />
      </div>
      <van-button type="primary" color="#ff6034" plain block @click="onClick">退出登录</van-button>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { useContentStore } from '@/stores/content'
import HeaderPopover from './index/content/components/header-popover.vue'
import { showNotify, showConfirmDialog } from 'vant'
import 'vant/es/dialog/style'
// import 'vant/es/toast/style'
import 'vant/es/notify/style'

import router from '@/router'

const content = useContentStore()

function onClick() {
  showConfirmDialog({
    title: '确定退出登录吗？',
    confirmButtonColor: 'red'
  })
    .then(() => {
      //清除数据
      localStorage.setItem('user', '')
      //跳转路由
      router.replace({ name: 'login' })
    })
    .catch(() => {
      return
    })
}

watchEffect(() => {
  //判断是否登录 token是否正确
  if (!content.token || content.token.length != 32) {
    //弹窗
    showNotify({ background: 'pink', message: '非法访问', color: 'red' })
    //跳路由
    router.push({ name: 'login' })
  }
})
</script>

<style scoped>
.page {
  background-color: #f7f7f7;
}
.account {
  background: #fff;
  position: relative;
  padding: 12px 10px 0;
  margin-bottom: 15px;
  border-radius: 0 0 10px 10px;
}
.account > p {
  font-size: 16px;
  color: #333;
}
.account > .iconi {
  position: absolute;
  right: 12px;
  top: 64px;
  font-size: 12px;
  background-color: #ffe4e4;
  color: #e2231a;
  padding: 2px 6px 6px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.van-card {
  background: #fff9f9;
  height: 90px;
  padding: 20px 15px 15px;
  border: 1px solid #ff414e;
  margin: 0;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
::v-deep(.van-image) {
  position: absolute;
  left: 50%;
  top: 40%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
::v-deep(.van-card__thumb) {
  width: 66px;
  height: 66px;
}
::v-deep(.van-card__content) {
  margin-left: 20px;
  font-size: 16px;
}

.account_manage {
  position: relative;
  margin-bottom: 15px;
  background: #fff;
  border-radius: 10px;
}
</style>
